<template>
  <div>
    <!-- 列表 -->
    <ul class="TemplateStyle">
      <!-- 出库日期 -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/date.png" />
          <span class="li_txt">出库日期</span>
        </div>
        <div class="label">
          <input type="text" :value="userDate" :disabled="true" />
        </div>
      </li>
      <!-- 爱心码 -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/loveCode.png" />
          <span class="li_txt">爱心码</span>
        </div>
        <div class="label">
          <input type="number" @blur="Mouse_out" v-model="donateId" />
        </div>
      </li>
      <!-- 出库单号 -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/symbol.png" />
          <span class="li_txt">出库单号</span>
        </div>
        <div class="label">
          <input type="number" :value="outId" :disabled="true" />
        </div>
      </li>
      <!-- 出库物资(名称) -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/birth.png" />
          <span class="li_txt">出库物资(名称)</span>
        </div>
        <div class="label">
          <input type="text" :value="outName" :disabled="true" />
        </div>
      </li>
      <!-- 入库物资(单位) -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/order.png" />
          <span class="li_txt">出库物资(单位)</span>
        </div>
        <div class="label">
          <input type="text" :value="outUnit" :disabled="true" />
        </div>
      </li>
      <!-- 生产日期 -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/date.png" />
          <span class="li_txt">生产日期</span>
        </div>
        <div class="label">
          <input type="text" :value="produceTime" :disabled="true" />
        </div>
      </li>
      <!-- 有效期至 -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/term.png" />
          <span class="li_txt">有效期至</span>
        </div>
        <div class="label">
          <input type="text" :value="effectTime" :disabled="true" />
        </div>
      </li>
      <!-- 批准文号 -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/abstract.png" />
          <span class="li_txt">批准文号</span>
        </div>
        <div class="label">
          <input type="text" :value="fileNo" :disabled="true" />
        </div>
      </li>
      <!-- 操作人 -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/donation.png" />
          <span class="li_txt">操作人</span>
        </div>
        <div class="label">
          <input type="text" v-model="operator" />
        </div>
      </li>
      <!-- 受赠方 -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/recipient.png" />
          <span class="li_txt">受赠方</span>
        </div>
        <div class="label">
          <input type="text" v-model="donatee" placeholder="请输入受赠方" />
        </div>
      </li>
      <!-- 承运方 -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/transport.png" />
          <span class="li_txt">承运方</span>
        </div>
        <div class="label">
          <input type="text" v-model="shipper" placeholder="请输入承运方" />
        </div>
      </li>
      <!-- 温度要求 -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/temperature.png" />
          <span class="li_txt">温度要求</span>
        </div>
        <div class="label">
          <input type="text" v-model="temp" />
        </div>
      </li>
      <!-- 包装数量 -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/number.png" />
          <span class="li_txt">包装数量</span>
        </div>
        <div class="label">
          <input type="number" v-model="packageNum" />
        </div>
      </li>
      <!-- 物资规格 -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/specs.png" />
          <span class="li_txt">物资规格</span>
        </div>
        <div class="label">
          <input type="text" v-model="productType" />
        </div>
      </li>
      <!-- 快递单号 -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/symbol.png" />
          <span class="li_txt">快递单号</span>
        </div>
        <div class="label">
          <input type="number" v-model="shipId" placeholder="请输入快递单号" />
        </div>
      </li>

      <!-- 附件 -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/Enclosure.png" />
          <span class="li_txt">附件</span>
        </div>
        <van-uploader accept="image/png, image/jpeg, image/jpg" :after-read="afterRead">
          <van-button
            style="border-radius:.8rem;height:2.1rem;line-height:2.1rem"
            icon="photo"
            type="primary"
          >上传领用原始凭证</van-button>
        </van-uploader>
      </li>
      <!-- 确认按钮 -->
      <button class="btn" @click="btnOutStorage">确定</button>
    </ul>
    <!-- loading -->
    <div style="padding-bottom: 4rem; position:top:50%">
      <van-loading
        v-show="loading"
        style="position: absolute;top: 50%;left: 46%;"
        type="spinner"
        color="#1989fa"
      ></van-loading>
    </div>
  </div>
</template>
<script>
import moment from "moment";

export default {
  name: "OutStorage",
  data() {
    return {
      userDate: "", // 展示给用户
      outTime: "",
      donateId: "",
      outId: "",
      outName: "",
      outUnit: "",
      produceTime: "",
      effectTime: "",
      operator: "",
      donatee: "",
      shipper: "",
      temp: "",
      packageNum: "",
      productType: "",
      shipId: "",
      fileNo: "",
      img: "",
      loading: false // loading
    };
  },
  created() {
    // 自动生成日期
    let nowDate = new Date();
    this.outTime = moment(nowDate).format("YYYY-MM-DD HH:mm:ss");
    this.userDate = moment(nowDate).format("YYYY-MM-DD");
    // 随机生成出库单号
    let random = "";
    for (let a = 0; a < 20; a++) {
      random += Math.floor(Math.random() * 10);
    }
    this.outId = random;
    // 待办
  },
  methods: {
    // 根据爱心码自动填写内容
    Mouse_out() {
      if (!this.donateId) {
        this.outName = "";
        this.outUnit = "";
        this.produceTime = "";
        this.effectTime = "";
        this.fileNo = "";
      } else if (this.donateId != null) {
        let loveCode = {
          userName: JSON.parse(localStorage.getItem("login")).res.user.userName,
          token: JSON.parse(localStorage.getItem("login")).res.token,
          donateId: this.donateId
        };
        //通过爱心码调用物资捐赠者信息;
        this.$api
          .getDonateProductById(loveCode)
          .then(res => {
            this.outName = res[0].donateName;
            this.outUnit = res[0].donateUnit;
            this.produceTime = res[0].produceTime.substring(0, 10);
            this.effectTime = res[0].effectTime.substring(0, 10);
            this.fileNo = res[0].fileNo;
          })
          .catch(res => {
            this.$dialog.alert({
              message: "未查询到该爱心码"
            });
            this.outName = "";
            this.outUnit = "";
            this.produceTime = "";
            this.effectTime = "";
            this.fileNo = "";
          });
      }
    },
    // 附件图片
    afterRead(file) {
      this.img = file.content;
    },
    btnOutStorage() {
      if (!this.donateId) {
        this.$dialog.alert({
          message: "请输入爱心码"
        });
      } else {
        this.loading = true; // loading显示
        let params = {
          token: JSON.parse(localStorage.getItem("login")).res.token,
          userName: JSON.parse(localStorage.getItem("login")).res.user.userName,
          outTime: this.outTime,
          donateId: this.donateId,
          outId: this.outId,
          outName: this.outName,
          outUnit: this.outUnit,
          produceTime: this.produceTime,
          effectTime: this.effectTime,
          fileNo: this.fileNo,
          operator: this.operator,
          donatee: this.donatee,
          shipper: this.shipper,
          temp: this.temp,
          packageNum: this.packageNum,
          productType: this.productType,
          shipId: this.shipId,
          attachment: this.img
        };
        this.$api
          .requestProductOut(params)
          .then(res => {
            this.loading = false; // loading隐藏
            this.$dialog.alert({
              message: res
            });
          })
          .catch(err => {
            this.loading = false; // loading隐藏
            this.$dialog.alert({
              message: err
            });
          });
      }
    }
  }
};
</script>
<style>
@import "../../assets/css/TemplateStyle.css";
</style>